<template>
	<div id="imagebg">
		<div id="box">颤抖吧 不会的同学</div>

		<div id="bt" @click="doit" style="color: red;">颤抖吧</div>

		<select name="zu" id="class" @change="tt">
			<option value="1">小伙伴们</option>
			<option value="2">一级罚写</option>
			<option value="3">二级罚写</option>
			<option value="4">终级罚写</option>
		</select>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		data() {
			return {
				namelist1: ["王向阳", "黎清宇", "程家璐", "李卓", '任航', "高路", "党涵", "许梦林", "杜文浩", "王世龙", "刘伟康", '杨帅', "赵耿", "周鑫",
					"杨鹏博", "张琛宜", "张继胜", "李海霞", "谢柯楠", "张关祥"
				],
				namelist2: ['1遍', '2遍', '3遍', '2遍', '4遍', '3遍', '2遍', '4遍', '3遍', '2遍', '3遍', '2遍', '3遍', '3遍', '3遍',
					'2遍', '2遍', '3遍', '4遍', '4遍', '3遍', '3遍', '1遍', '4遍', '1遍', '3遍', '3遍', '3遍', '3遍', '3遍'
				],
				namelist3: ['6遍', '5遍', '6遍', '7遍', '7遍', '4遍', '5遍', '6遍', '7遍', '6遍', '5遍', '6遍', '7遍', '6遍', '7遍'],
				namelist4: ['15遍', '20遍', '25遍', '30遍', '15遍', '20遍', '25遍', '30遍', '35遍', '40遍', '25遍', '30遍', '30遍',
					'35遍', '15遍', '20遍', '10遍'
				],
				mytime: null,
				obj: []
			}
		},
		async mounted() {
			//初始化数据
			let result =await axios.get("http://localhost:3000/api/get").catch(err => {
				console.log(err);
			})
			result=result.data.data.map(item=>{
				return JSON.parse(item).realname
			})
			this.namelist1=result;
			this.namelist2=result;
			this.namelist3=result;
			this.namelist4=result;
			
			var oImagebg = window.document.getElementById("imagebg");
			var oBt = window.document.getElementById("bt");
			var bstop = true;
			oImagebg.onkeydown = function(ev) {
				var ev = ev || window.event;
				if (ev.keyCode == 13 && bstop) {
					this.show();
					bstop = false;
					bt.innerHTML = "停止点名";
				} else {
					clearTimeout(this.mytime);
					this.mytime = null;
					bt.innerHTML = "开始点名";
					bstop = true;
				}
			};
		},
		methods: {
			//选择下拉菜单
			tt() {
				var num = document.getElementById('class').value;
				let name = 'namelist' + num
				this.obj = eval(this[name]);
			},
			//点击“谁中奖呢？”
			doit() {
				var bt = window.document.getElementById("bt");
				if (this.mytime == null) {
					bt.innerHTML = "谁中奖呢？";
					this.show();
				} else {
					bt.innerHTML = "恭喜中奖";
					clearTimeout(this.mytime);
					this.mytime = null;
				}
			},
			show() {
				var box = window.document.getElementById("box");
				var num = Math.floor((Math.random() * 100000)) % this.obj.length;
				box.innerHTML = this.obj[num];
				this.mytime = setTimeout(this.show, 1);
			}
		}


	}
</script>

<style scoped>
	@charset "utf-8";

	/* 默认网页编码是UTF-8个格式*/
	img,
	:link img,
	:visited img {
		border: none;
	}

	/* 默认图片不带边框*/
	input {
		vertical-align: middle;
		font-family: 宋体, serif;
	}

	/* 默认输入框字居中，字体为宋体*/
	* {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}

	/* 默认所有对象边距为0，填充为0*/
	#imagebg {
		/* background-image: url(images/images.jpg); */
		background-repeat: no-repeat;
		background-position: center top;
		height: 643px;
		overflow: hidden;
	}

	#box {
		height: 100px;
		line-height: 100px;
		margin: 0 auto;
		margin-top: 200px;
		width: 703px;
		text-align: center;
		color: #138ee7;
		font-size: 70px;
		font-family: "Microsoft YaHei", "微软雅黑", "宋体";
	}

	#bt {
		color: #FFFFFF;
		cursor: pointer;
		font-size: 16px;
		width: 142px;
		height: 36px;
		line-height: 36px;
		margin: 0 auto;
		margin-top: 65px;
		text-align: center;
		font-family: "Microsoft YaHei", "微软雅黑", "宋体";
	}

	#class {
		position: absolute;
		top: 73px;
		left: 335px;
	}
</style>
